<template>
	<view class="height-100 bg-gray main">
		<view class="flex-direction-row overflow-hidden padding-tb-sm">
			<swiper class="flex-sub radius-xl overflow-hidden" style="height: 388rpx;" :indicator-dots="true"
				:autoplay="true" interval="4000" :circular="true" duration="500">
				<block v-for="(item,index) in carouselList" :key="index">
					<swiper-item class="radius-xl overflow-hidden">
						<image :src="item.imageUrl" class="col-1 height-1 radius-xl" mode="scaleToFill"></image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<view class="bg-white" style="border-radius: 16rpx;">
			<block v-for='(item,index) in storeList' :key='index'>
				<view class="padding select-on">
					<view class="address flex justify-between">
						<text class="text-lg">{{item.storeName}}</text>
						<text @click="goMap" class="iconfont color-df margin-right-xs" style="font-size: 60rpx;">&#xe88a;</text>
					</view>
					<view class="address flex justify-between">
						<view class="flex align-center">
							<uni-icons type="location" size="30"></uni-icons>
							<view>{{ item?.address }}</view>
						</view>
						<uni-icons class="margin-right" color="#d93722" type="phone" size="30"
							@click="makePhoneCall"></uni-icons>
					</view>
				</view>
			</block>
		</view>
		<view class="title">
			商家信息
		</view>
		<view class="bg-white info">
			<view>
				<text class="lineBusiness1">营业时段：</text>
				<text class="lineBusiness1">{{form.startTime}}-{{form.endTime}}</text>
			</view>
			<view>
				<text class="lineBusiness1">配送时段：</text>
				<text class="lineBusiness1">{{form.startTime}}-{{form.endTime}}</text>
			</view>
			<view>
				<text class="lineBusiness1">自取时段：</text>
				<text class="lineBusiness1">{{form.startTime}}-{{form.endTime}}</text>
			</view>
			<view class="line">
			</view>
			<view>
				<text class="lineBusiness1">配送平台：</text>
				<text class="lineBusiness2">同城配送</text>
				<text class="lineBusiness2">快递物流</text>
				<text class="lineBusiness2">门店自提</text>
			</view>
			<view class="line">
			</view>
			<view class="lineBusiness">
				相关证件照:
			</view>
			<view>
				<image v-for="(n,i) in form.certificateImg1" :key="i" class="IDimage" :src="n" mode=""></image>
			</view>
			<view class="line">
			</view>
			<view class="lineBusiness">
				门店介绍:
			</view>
			<text class="lineBusiness1" v-html="form.introduction">
			</text>
		</view>
	</view>
</template>

<script>
	import {
		storeApiId
	} from "@/common/storeIntroduction.js"
	export default {
		data() {
			return {
				carouselList: [
					// {
					// 	id: 28,
					// 	imageUrl: "https://filebucket-1318161244.cos.ap-shanghai.myqcloud.com/20240731211517A061.jpg",
					// 	name: "测试高岗",
					// },
					// {
					// 	id: 27,
					// 	imageUrl: "https://filebucket-1318161244.cos.ap-shanghai.myqcloud.com/20240731211346A059.jpg",
					// 	name: "1111",
					// },
					// {
					// 	id: 25,
					// 	imageUrl: "http://ytl.mifanny.com/profile/upload/product/2024/05/24/1111_20240524193726A004.jpg",
					// 	name: "不开放的广告",
					// },
				],
				storeList: [
					// {
					// 	address: "菲律宾马尼拉大都会马卡蒂安东尼奥S阿奈兹大道4896号11111",
					// 	storeName: "苏州中医馆总店苏州中医馆总",
					// 	id: 9
					// },
				],
				form: {}
			}
		},
		onLoad() {
			// console.log(uni.getStorageSync('userinfo').storeId,'===');
			this.getUserinfo()
		},
		methods: {
			goMap() {
				// 假设你已经获取到了目的地的经纬度
				const latitude = this.form.latitude; // 目的地纬度
				const longitude = this.form.longitude; // 目的地经度
				const name = this.form.storeName; // 目的地名称
				const address = this.form.address; // 目的地地址
				wx.openLocation({
				  latitude: latitude, // 目的地纬度
				  longitude: longitude, // 目的地经度
				  name: name, // 目的地名称
				  address: address, // 目的地地址
				  scale: 18, // 地图缩放级别，默认为18
				  success: function (res) {
				    console.log("打开地图成功", res);
				  },
				  fail: function (err) {
				    console.error("打开地图失败", err);
				  }
				});
			},
			async getUserinfo() {
				// console.log(uni.getStorageSync('storeId'), 'storeId');
				// let res = await storeApiId(uni.getStorageSync('storeId'));
				let res = await storeApiId(uni.getStorageSync('userinfo').storeId);
				console.log('userinfo: ', res);
				let obj = {
					id: 1,
					imageUrl: res.headerImg,
					name: '门头照'
				}
				this.carouselList.push(obj)
				let obj1 = {
					id: 9,
					storeName: res.storeName,
					address: res.address
				}
				this.storeList.push(obj1)
				this.form = res;
				this.form.certificateImg1 = res.certificateImg && res.certificateImg.split(",");
				console.log(this.form.certificateImg1);
				// if(res.code === 200){
				// 	this.userinfo = res.data;
				// 	this.nickname = res.data.nickname || "请设置用户名"
				// 	// 缓存用户数据
				// 	uni.setStorageSync('userinfo', res.data);
				// }else{
				// 	uni.showModal({
				// 		content: '获取用户信息失败',
				// 		showCancel: false
				// 	});
				// }
			},
			makePhoneCall(phone){
				uni.makePhoneCall({
					phoneNumber: this.form.mobile 
				});
			},
			startNavigation() {
				const destination = "北京天安门"; // 目的地名称
				const lat = 39.90469; // 目的地纬度
				const lng = 116.40717; // 目的地经度
		
				// 尝试跳转到高德地图小程序
				wx.navigateToMiniProgram({
					appId: 'wxeb490c6f9b154ef9', // 高德地图小程序的 AppID
					path: `pages/route/index?to=${lng},${lat},${destination}&type=drive`,
					success(res) {
						console.log('跳转到高德地图小程序成功', res);
					},
					fail(err) {
						console.error('跳转到高德地图小程序失败', err);
						// 跳转到高德地图 Web 页面
						const url = `https://uri.amap.com/navigation?to=${lng},${lat},${destination}&mode=drive&policy=0&src=myMiniProgram`;
						wx.navigateTo({
							url: `/pages/webview/webview?url=${encodeURIComponent(url)}`
						});
					}
				});
			}
		}
	}
</script>

<style>
	.main {
		padding: 0 20rpx 20rpx;
	}

	.title {
		height: 45rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #222222;
		line-height: 45rpx;
		text-align: left;
		font-style: normal;
		margin-top: 20rpx;
	}

	.info {
		margin: 20rpx 0;
		border-radius: 16rpx;
		padding: 20rpx;
	}

	.lineBusiness1 {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}

	.lineBusiness2 {
		height: 42rpx;
		background: rgba(101, 182, 116, 0.1);
		border-radius: 8rpx;
		border: 1rpx solid #65B674;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #65B674;
		line-height: 33rpx;
		text-align: center;
		font-style: normal;
		padding: 3rpx 6rpx;
		margin-right: 10rpx;
	}

	.line {
		border-bottom: 0.2rpx solid #eee;
		margin: 20rpx 0;
	}

	.IDimage {
		padding: 20rpx;
		height: 20vh;
		width: 100%;
		box-sizing: border-box;
	}

	.address {
		color: #999;
		font-size: 13px;
		padding-bottom: 10px;
		display: flex;
		align-items: center;
	}
</style>